<template>
  <section class="profile-number-info">
    <profile-number-info-item
      v-for="(item, index) in numberInfo"
      :key="index"
      :item="item"
      :index="index"
      @click.native="handleSkipPage(index)"
    />
  </section>
</template>

<script>
import ProfileNumberInfoItem from "./childComps/ProfileNumberInfoItem";
export default {
  data() {
    return {
      numberInfo: [
        {
          count: 0.0,
          decorate: "元",
          text: "我的余额",
        },
        {
          count: 0,
          decorate: "个",
          text: "我的余额",
        },
        {
          count: 0,
          decorate: "分",
          text: "我的积分",
        },
      ],
    };
  },
  props: {
    digitInfo: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    // 解决需要刷新页面才能正确显示信息的bug
    digitInfo(value) {
      if (!(value[0] === undefined)) {
        for (const key in this.numberInfo) {
          this.numberInfo[key].count = value[key];
        }
      }
    },
    // 解决需要刷新页面才能正确显示信息的bug
    $route(to, from) {
      for (const key in this.numberInfo) {
        this.numberInfo[key].count = localStorage.getItem("user_id")
          ? this.digitInfo[key]
          : (this.numberInfo[key].count = 0);
      }
    }
  },
  methods: {
    handleSkipPage(index) {
      let path = "";
      switch (index) {
        case 0:
          path = "balance";
          break;
        case 1:
          path = "benefit";
          break;
        default:
          path = "points";
          break;
      }
      this.$router.push(path);
    },
  },
  components: {
    ProfileNumberInfoItem,
  },
};
</script>
<style lang="less" scoped>
.profile-number-info {
  display: flex;
  text-align: center;
  background-color: #fff;
}
</style>